<template>
    <div>
        <navtop title="地址管理" :fixed="true" />
        <div class="address">
            <van-address-list :list="list" default-tag-text="默认" :switchable="false" @add="addAddress"
                @edit="editAddress" />
        </div>
        <div v-if="list.length === 0">
            <van-empty description="没有地址数据！" />
        </div>
    </div>
</template>
<script setup lang="ts">
import navtop from "@/components/navtop.vue";

import { getfindAddress } from "@/api/index";

import { useRouter } from "vue-router"

let router: any = useRouter();

let list: any = ref<Array<any>>([]);

onMounted(() => {
    getfindAddress().then((result) => {
        // console.log(result);
        if (result.data.code === 20000) {

            result.data.result.forEach((item: any): void => {

                item.address = `${item.province}${item.city}${item.county}${item.addressDetail}`;

            })

            list.value = result.data.result;
        }
    })
})

//新增地址
let addAddress: () => void = (): void => {
    router.push({ name: 'Address' });
}

//编辑地址
let editAddress: (item: any) => void = (item: any): void => {

    router.push({ name: 'Address', query: { aid: item.aid } });
}

</script>

<style lang="less" scoped>
.address {
    margin-top: 50px;

    :deep(.van-address-item .van-radio__icon--checked .van-icon) {
        background-color: #0c34ba;
        border-color: #0c34ba;
    }

    :deep(.van-tag--danger) {
        background-color: #0c34ba;
    }

    :deep(.van-button--danger) {
        background-color: #0c34ba;
        border-color: #0c34ba;
    }
}
</style>